<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
        }

        main {
            background-color: azure;
        }

        #mainContent {
            border: 1px solid red;
            display: block;
            position: relative;
            padding-left: 220px;
            top: 0;
        }

        #sideNav {
            position: fixed;
            left: 0;
            top: 0;
            background-color: lemonchiffon;
        }

        #menuToggle {
            border: 1px solid blue;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }

        #menuToggle span {
            display: flex;
            width: 45px;
            height: 4px;
            margin-bottom: 11px;
            position: relative;
            background: red;
            border-radius: 0px;
            z-index: 1;
            transform-origin: left top;
            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                opacity 0.55s ease;
        }

        #checkBoxSideMenu {
            position: absolute;
            width: 45px;
            height: 45px;
            margin: 0;
            cursor: pointer;
            opacity: 0;
            /*不显示checkbox*/
            z-index: 2;
            /*在span上, 以接收mouse*/
        }

        #checkBoxSideMenu:checked~span {
            opacity: 1;
            transform: scale(1.4, 1.4) rotate(45deg) translate(0, -2px);
        }

        #checkBoxSideMenu:checked~span:nth-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        #checkBoxSideMenu:checked~span:nth-child(4) {
            transform: scale(1.4, 1.4) translate(0px, 9px) rotate(-45deg);
        }


        #menuContainer {
            border: 1px solid green;
            /*            
            justify-content: flex-start;
            align-items: flex-start;
            position: absolute;
*/
            padding-top: 0px;
            width: 200px;
            height: 80vh;

            overflow: auto;


            transform-origin: 0% 0%;
            transform: translate(-100%, 0);
            transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }

        #checkBoxSideMenu:checked~#menuContainer {
            transform: none;
        }
    </style>
    <script src="script/jquery-3.5.1.js"></script>
    <script>
        function sideMenuClick() {
            var leftad = document.getElementById("leftad");
            var fsb = document.getElementById("full-screen-button");
            var checkbox = document.getElementById("checkbox1").checked;

            if (checkbox) {
                leftad.style.display = "none";
                console.log("0");
            } else if (!checkbox && screenfull.isFullscreen) {
                leftad.style.display = "none";
                console.log("1");
            } else {
                leftad.style.display = "block";
                console.log("2");
            }
        }
    </script>

</head>

<body>
    <main>
        <div id="mainContent">
            <h1>a16_effect_sideMenu</h1>
            展示自动隐藏的side menu.
            <p />
            effect有两点. 1)弹出/隐藏sideMenu的按钮. 2)弹出/隐藏的sideMenu.
            <p />
            checkbox后随3个span, 使用css变换实现点击的视觉反馈. 同样, 以menuToggle的css变换实现隐藏和显现.
            <p />
            see <a href=https://freepacman.org/>https://freepacman.org/ </a> <p />
            点击左上角的sideMenu显示/隐藏按钮.
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容
            <p />
            无内容

        </div>
    </main>
    <nav>
        <div id="sideNav">
            <div id="menuToggle">
                <input type="checkbox" title="Show or hide side menu." id="checkBoxSideMenu"> </input>
                <span></span>
                <span></span>
                <span></span>
                <div id="menuContainer">
                    <ul>
                        <li>侧边菜单 1</li>
                        <li>侧边菜单 2</li>
                        <li>侧边菜单 3</li>
                        <li>侧边菜单 4</li>
                        <li>侧边菜单 5</li>
                        <li>侧边菜单 6</li>
                        <li>侧边菜单 7</li>
                        <li>侧边菜单 8</li>
                        <li>侧边菜单 9</li>
                        <li>侧边菜单 10</li>
                        <li>侧边菜单 11</li>
                        <li>侧边菜单 12</li>
                        <li>侧边菜单 13</li>
                        <li>侧边菜单 14</li>
                        <li>侧边菜单 15</li>
                        <li>侧边菜单 16</li>
                        <li>侧边菜单 17</li>
                        <li>侧边菜单 18</li>
                        <li>侧边菜单 19</li>
                        <li>侧边菜单 20</li>
                        <li>侧边菜单 21</li>
                        <li>侧边菜单 22</li>
                        <li>侧边菜单 23</li>
                        <li>侧边菜单 24</li>
                        <li>侧边菜单 25</li>
                        <li>侧边菜单 26</li>
                        <li>侧边菜单 27</li>
                        <li>侧边菜单 28</li>
                        <li>侧边菜单 29</li>
                        <li>侧边菜单 30</li>
                        <li>侧边菜单 31</li>
                        <li>侧边菜单 32</li>
                        <li>侧边菜单 33</li>
                        <li>侧边菜单 34</li>
                        <li>侧边菜单 35</li>
                        <li>侧边菜单 36</li>
                        <li>侧边菜单 37</li>
                        <li>侧边菜单 38</li>
                        <li>侧边菜单 39</li>
                        <li>侧边菜单 40</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>


</body>

</html>